<template>
  <div>

    <el-card class="box-card" hadow="always">
      <el-form label-width="80px">
        <el-form-item>
          <h3>xxx-系统登录</h3>
          <el-divider/>

        </el-form-item>

        <el-form-item label="用户名">
          <el-input v-model="form.username"/>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password"/>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="btnLoginClick"><i class="fa fa-address-book-o" aria-hidden="true"></i>登录
          </el-button>
          <el-tag v-show="isShow" type="danger">用户名或者密码错误</el-tag>

        </el-form-item>

      </el-form>


    </el-card>

  </div>
</template>

<script>
  export default {
    name: "Login",
    data: function () {
      return {
        form: {
          username: '',
          password: ''

        }, isShow: false
      }
    },
    methods: {
      btnLoginClick() {
        var _this = this;
        this.axios({//promise
          url: 'http://test.org/emp/login',
          methods: 'get',
          dataType: 'json'
        }).then(function (res) {//response request
          let current = res.data
          if (current.username == _this.form.username && current.password == _this.form.password) {
            _this.$router.push('/system/m1');
          } else {
            _this.isShow = true;
          }

        })

      }
    }, mounted() {

      /**
       * promise
       *   回避了 回调地狱
       * */

    }
  }
</script>

<style scoped>
  .box-card {
    /*   border: 1px solid;*/
    padding-top: 10px;
    width: 480px;
    margin-left: 500px;
    margin-top: 120px;
  }
</style>
